<template>
    <div class="right">
        <div v-show="!centerShow">
            <div class="top">
                <div class="name">{{nameVal}} </div>
                <div class="num" v-show='totalVal != null'>（{{totalVal}}人）</div>
                <el-button v-show="isEditRole == 0" class="editbutton" size="medium" @click="editClick()">编辑</el-button>
            </div>
            <div class="memberButtonBox">
                <el-button size="medium" @click="addMemberClick()">添加成员</el-button>
                <el-button size="medium" @click="deleteMemberClick()">批量删除成员</el-button>
            </div>
            <ul class="listUl">
                <li class="fistLi">
                    <div class="one">
                        <div :class="{check:true,checkOk:checkShow}" @click='checkAllClick()'>
                            <div class="checkTrue"></div>
                        </div>
                        全选
                    </div>
                    <div class="two">
                        姓名
                    </div>
                    <div class="three">
                        手机号
                    </div>
                    <div class="four">
                        企业
                    </div>
                    <div class="five">
                        部门
                    </div>
                    <div class="six">
                        管理范围
                    </div>
                    <div class="seven">
                        操作
                    </div>
                </li>
                <li class="listLi" v-for="(item,index) in list" :key="index">
                    <div class="one">
                        <div :class="{check:true,checkOk:item.checkShow}" @click='checkClick(index)'>
                            <div class="checkTrue"></div>
                        </div>
                        {{index + 1}}
                    </div>
                    <div class="two" :title='item.memberName'>
                        {{item.memberName}}
                    </div>
                    <div class="three" :title='item.mobile'>
                        {{item.mobile}}
                    </div>
                    <div class="four" :title='item.companyName'>
                        {{item.companyName}}
                    </div>
                    <div class="five" :title='item.deptList'>
                        {{item.deptList}}
                    </div>
                    <div class="six" :title='item.scopeName'>
                        {{item.scopeName}}
                    </div>
                    <div class="seven">
                        <div class="editImg" @click='regulateEditClick(index)'></div>
                    </div>
                </li>

            </ul>
            <div class="listzZoor" v-show='list.length == 0'>
                当前角色下暂无成员
            </div>
            <!-- 分页 -->
            <div class="lastLi" v-show='list.length > 0'>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalVal">
                </el-pagination>
            </div>
        </div>
        <div v-show="centerShow" class="listZoor">
            暂无数据
        </div>
        <!--删除成员弹出框-->
        <div v-show="deleteShow" class="delBox">
            <div class="delContent">
                <vue-del @ok="okDeleteMemeberClick" @canle="cancelDeleteClick" :name="deleteTitleVal"></vue-del>
            </div>
        </div>
        <!--删除角色弹出框-->
        <div v-show="deleteRoleShow" class="delBox">
            <div class="delContent">
                <vue-del @ok="okDeleteRoleFunClick" @canle="cancelDeleteClick" :name="deleteTitleVal"></vue-del>
            </div>
        </div>
        <!-- 添加编辑角色 -->
        <div class="editFixed" v-show="editShow">
            <div class="editBox">
                <li class="editTitle">
                    {{editTitleVal}}
                </li>
                <li class="editLi">
                    <div class="editName">
                        <span class="required">*</span>角色名称：
                    </div>
                    <div class="editInp">
                        <input type="text" :class='{borBlue:editValShow}' v-model.trim='editVal' maxlength="20" placeholder="请输入2-20字角色名称">
                    </div>
                </li>
                <li class="editlastLi" v-if='editTitleVal == "编辑角色"'>
                    <el-button size="medium" type="primary" @click="addEditClick()">保存</el-button>
                    <el-button size="medium" type="info" @click="deleteEditClick()">删除</el-button>
                    <el-button size="medium" type="info" @click='cancelEditclick'>取消</el-button>
                </li>
                <li class="editlastLi" v-if='editTitleVal == "新增角色"'>
                    <el-button size="medium" type="primary" @click="addReoleClick()">保存</el-button>
                    <el-button size="medium" type="info" @click="cancelEditclick()">取消</el-button>
                </li>
            </div>
        </div>
        <!-- 选择成员 -->
        <v-addMember :isupdatePop="memberListShow" @affirm="memberAddClick" @cancel="memberCancelClick" :userselectpop="memberOkList"></v-addMember>
        <!-- 选择企业至部门 -->
        <v-selectDept :updatePop="selectDeptShow" @affirm="selectDeptOkClick" @cancel="selectDeptCancelClick" :Deptselectpop="selectDeptCopyList"
            :roleMemberId='roleMemberId'></v-selectDept>

    </div>
</template>
<script>
    import { mapActions } from "vuex";
    import addMember from "./addMember.vue";
    import selectDept from "./selectDept.vue";
    import vueDel from "./del.vue";
    export default {
        components: {
            "v-addMember": addMember,
            "v-selectDept": selectDept,
            vueDel
        },
        data() {
            return {
                centerShow: true,   //是否暂时无数据
                checkShow: false,    //全选
                nameVal: '角色',
                list: [],
                deleteTitleVal: '',//删除标题
                deleteShow: false,   //删除成员弹框
                deleteRoleShow: false,   //删除角色弹框
                editShow: false,//右侧操作弹框
                editTitleVal: '新增角色',//右侧操作弹框标题
                editVal: '',//角色名称Val
                editValShow: false,//角色名称验证
                roleid: '',//角色id
                currentPage: 1, //页码
                pageSize: 10, //每页条数
                totalVal: null, //总数量
                memberListShow: false, // 选择成员弹出框
                memberOkList: [], //已选成员
                selectDeptShow: false,  // 选择企业至部门弹框
                selectDeptCopyList: [],  //已选部门
                roleMemberId: '',   //成员id
                isEditRole: 1, //角色编辑权限
            };
        },
        created: function () {

        },
        mounted() {

        },
        mounted() {
            let self = this
            //添加角色
            mapFun.$on('addroleLeftFun', (obj) => {
                self.editTitleVal = '新增角色'
                self.editVal = ''
                self.editShow = true
                self.editValShow = false
            })
            //编辑角色组
            mapFun.$on('editGroupFun', (obj) => {
                self.editShow = true
                self.editValShow = false
            })
            //角色选择
            mapFun.$on('childClickFun', (obj) => {
                console.log(obj)
                self.nameVal = obj.value
                self.isEditRole = obj.isEdit
                self.roleid = obj.id
                self.checkShow = false
                self.centerShow = false
                self.getMemberList()
            })
            //删除最后一个角色后没有角色，更新成员列表
            mapFun.$on('childDeleteClickFun', () => {
                self.centerShow = true
                self.list = []
            })
        },
        methods: {
            //添加成员
            addMemberClick() {
                this.memberListShow = true
            },
            //添加成员保存
            memberAddClick(val) {
                let self = this
                let memberIdList = []; // 添加的成员
                if (val.length > 0) {
                    val.forEach(ele => {
                        memberIdList.push(ele.memberId)
                    });
                    self.getapimemberpatchaddposition(JSON.stringify({
                        positionId: self.roleid,
                        memberList: memberIdList,
                    })).then(data => {
                        if (data.statusCode == 200) {
                            self.$message({
                                showClose: true,
                                message: '添加成功',
                                type: 'success'
                            });
                            self.getMemberList()
                        } else {
                            self.$message(data.statusMessage);

                        }
                    }).catch(msg => {
                        self.$message("服务器异常");
                    })
                }
                this.memberListShow = false
            },
            //取消添加成员
            memberCancelClick() {
                this.memberListShow = false
            },
            //分页获取成员职位列表
            getMemberList() {
                let self = this
                self.getapimemberfindpagepositionlist({
                    companyId: sessionStorage.getItem('ORGID'),
                    positionId: self.roleid,
                    pageNo: self.currentPage,
                    pageSize: self.pageSize,
                }).then(data => {
                    if (data.statusCode == 200) {
                        self.list = []
                        if (data.data) {
                            self.totalVal = data.data.total * 1
                            if (data.data.records) {
                                if (data.data.records.length > 0) {
                                    let arr = []
                                    data.data.records.forEach(ele => {
                                        arr.push({
                                            checkShow: false,
                                            memberName: ele.memberName,
                                            mobile: ele.mobile,
                                            companyName: ele.companyName,
                                            deptList: ele.deptList.join(','),
                                            memberId: ele.memberId,
                                            scopeList: ele.scopeList ? ele.scopeList : [],
                                            scopeNameList: [],
                                            scopeName: '',
                                        })
                                    })

                                    arr.forEach(ele => {
                                        if (ele.scopeList.length > 0) {
                                            ele.scopeList.forEach(sel => {
                                                ele.scopeNameList.push(sel.name)
                                            })
                                            ele.scopeName = ele.scopeNameList.join(',')
                                        }
                                    })
                                    self.list = arr
                                }
                            }
                        }
                    } else {
                        self.$message(data.statusMessage);
                    }
                }).catch(msg => {
                    self.$message("服务器异常");
                })
                self.checkShow = false
            },
            //每页数据大小 
            handleSizeChange(val) {
                this.pageSize = val
                this.getMemberList()
            },
            //当前页
            handleCurrentChange(val) {
                this.currentPage = val
                this.getMemberList()
            },
            //全选
            checkAllClick() {
                let self = this
                if (self.list.length > 0) {
                    self.checkShow = !self.checkShow
                    for (let i = 0; i < self.list.length; i++) {
                        if (self.checkShow == true) {
                            self.list[i].checkShow = true
                        } else {
                            self.list[i].checkShow = false
                        }
                    }
                }
            },
            //单选
            checkClick(index) {
                this.list[index].checkShow = !this.list[index].checkShow
                let self = this
                let isShow = true
                for (let i = 0; i < self.list.length; i++) {
                    if (self.list[i].checkShow == false) {
                        isShow = false
                    }
                }
                if (isShow) {
                    self.checkShow = true
                } else {
                    self.checkShow = false
                }
            },
            //编辑角色
            editClick() {
                if (this.isEditRole == 0) {
                    this.editShow = true
                    this.editTitleVal = '编辑角色'
                    this.editVal = this.nameVal
                } else if (this.isEditRole == 1) {
                    this.$message('您没有权限编辑')
                }
            },
            //编辑角色保存
            addEditClick() {
                let self = this
                if (self.editVal.length > 1 && self.editVal.length < 21) {
                    self.getapiorgLabelValueModify(JSON.stringify({
                        id: self.roleid,
                        value: self.editVal
                    })).then(data => {
                        if (data.statusCode == 200) {
                            mapFun.$emit('editRoleFun')
                        } else {
                            self.$message(data.statusMessage)
                        }
                    }).catch(msg => {
                        self.$message('服务器异常')
                    })
                    self.editShow = false
                } else {
                    self.editValShow = true
                }
            },
            //删除角色
            deleteEditClick() {
                this.deleteTitleVal = '确认删除该角色及移除该角色中所有员工？'
                this.deleteRoleShow = true
            },
            //确认删除角色
            okDeleteRoleFunClick() {
                let self = this
                self.getapiorgLabelValueDelete({
                    id: self.roleid
                }).then(data => {
                    if (data.statusCode == 200) {
                        mapFun.$emit('deleteRoleFun')
                        self.$message({
                            showClose: true,
                            message: '操作成功',
                            type: 'success'
                        });
                    } else {
                        self.$message(data.statusMessage)
                    }
                }).catch(msg => {
                    self.$message('服务器异常')
                })

                this.editShow = false
                this.deleteRoleShow = false
            },
            //新增角色保存
            addReoleClick() {
                let self = this
                if (self.editVal.length > 1 && self.editVal.length < 21) {
                    self.getapiorgLabelValueSave(JSON.stringify({
                        labelType: 1,
                        companyId: sessionStorage.getItem('ORGID'),
                        value: self.editVal,
                    })).then(data => {
                        if (data.statusCode == 200) {
                            mapFun.$emit('addReoleFun')
                            self.$message({
                                showClose: true,
                                message: '操作成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                type: "info",
                                message: data.statusMessage
                            });
                        }
                    }).catch(msg => {
                        this.$message({
                            type: "info",
                            message: "服务器异常"
                        });
                    })
                    self.editShow = false
                } else {
                    self.editValShow = true
                }
            },
            //取消右侧编辑框
            cancelEditclick() {
                this.editShow = false
            },
            //批量删除成员
            deleteMemberClick() {
                let self = this
                if (self.list.length > 0) {
                    let ifDeleteShow = false
                    for (let i = 0; i < self.list.length; i++) {
                        if (self.list[i].checkShow == true) {
                            ifDeleteShow = true
                        }
                    }
                    if (ifDeleteShow) {
                        this.deleteTitleVal = '确认从该角色中移除选中员工？'
                        this.deleteShow = true
                    } else {
                        self.$message('请先选择成员')
                    }
                } else {
                    self.$message('暂无成员不支持删除')
                }

            },
            //确认删除成员
            okDeleteMemeberClick() {
                let self = this
                let idArr = []
                for (let i = 0; i < self.list.length; i++) {
                    if (self.list[i].checkShow == true) {
                        idArr.push(self.list[i].memberId)
                    }
                }
                self.getapimemberpatchdeleteposition(JSON.stringify({
                    positionId: self.roleid,
                    memberList: idArr,
                })).then(data => {
                    if (data.statusCode == 200) {
                        self.getMemberList()
                        self.$message({
                            showClose: true,
                            message: '操作成功',
                            type: 'success'
                        });
                        self.checkShow = false
                    } else {
                        self.$message(data.statusMessage)
                    }
                })
                this.deleteShow = false
            },
            //取消删除
            cancelDeleteClick() {
                this.deleteShow = false
                this.deleteRoleShow = false
                this.checkShow = false
            },
            //成员管理范围
            regulateEditClick(index) {
                this.selectDeptShow = true
                this.selectDeptCopyList = this.list[index].scopeList
                this.roleMemberId = this.list[index].memberId
            },
            //确认成员管理范围
            selectDeptOkClick(obj) {
                let self = this
                self.selectDeptShow = false
                var ids = []
                if (obj.length > 0) {
                    obj.forEach(ele => {
                        ids.push(ele.id)
                    })
                }
                self.getapimembersettingmmscope(JSON.stringify({
                    memberId: self.roleMemberId,
                    positionId: self.roleid,
                    deptIdList: ids,
                })).then(data => {
                    if (data.statusCode == 200) {
                        self.getMemberList()
                        self.$message({
                            showClose: true,
                            message: '操作成功',
                            type: 'success'
                        });
                    } else {
                        self.$message(data.statusMessage);
                    }
                }).catch(msg => {
                    self.$message("服务器异常");
                })
            },
            //取消成员管理范围弹框
            selectDeptCancelClick() {
                this.selectDeptShow = false
            },
            ...mapActions([
                'getapiorgLabelValueSave',
                'getapimemberfindpagepositionlist',
                'getapiorgLabelValueModify',
                'getapimemberpatchaddposition',
                'getapiorgLabelValueDelete',
                'getapimemberpatchdeleteposition',
                'getapimembersettingmmscope'
            ])
        }
    };
</script>
<style scoped>
    .right {
        overflow: hidden;
    }

    .top {
        display: flex;
        height: 60px;
        margin-top: 16px;
        position: relative;
    }

    .name {
        margin-left: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        font-weight: bold;
    }

    .num {
        margin-left: 6px;
        height: 60px;
        line-height: 60px;
        font-size: 16px;
    }

    .editbutton {
        position: absolute;
        top: 20px;
        right: 40px;
    }

    .memberButtonBox {
        display: flex;
        padding-left: 54px;
    }

    .listUl {
        width: 800px;
        margin-left: 50px;
        margin-top: 24px;
    }

    .listUl>li>div {
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    .fistLi {
        display: flex;
        height: 46px;
        border-top: 1px solid #ccc;
    }

    .fistLi>div {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
        background: rgba(56, 173, 255, 0.1);
        padding: 0 4px;
    }

    .listLi {
        display: flex;
        height: 32px;
    }

    .listLi>div {
        line-height: 32px;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 0 4px;
    }

    .one {
        width: 10%;
        display: flex;
        border-left: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .two {
        width: 10%;
    }

    .three {
        width: 15%;
    }

    .four {
        width: 16%;
    }

    .five {
        width: 17%;
    }

    .six {
        width: 21%;
    }

    .seven {
        width: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .listzZoor {
        width: 100%;
        height: 80px;
        line-height: 80px;
        font-size: 14px;
        text-align: center;
        color: #929292;
    }

    .lastLi {
        height: 50px;
        margin-top: 24px;
        margin-right: 85px;
    }

    .lastLi>div {
        float: right;
    }

    .editImg {
        width: 24px;
        height: 24px;
        background: url("/static/img/编辑.png") 3px 50% no-repeat;
        background-size: 75%;
        cursor: pointer;
    }

    .check {
        width: 14px;
        height: 14px;
        position: relative;
        background: white;
        border: 1px solid #ccc;
        border-radius: 2px;
        margin-right: 4px;
        cursor: pointer;
    }

    .check:hover {
        border: 1px solid #38adff;
    }

    .checkOk {
        width: 16px;
        height: 16px;
        background: #38adff !important;
        border: none !important;
    }

    .checkTrue {
        width: 4px;
        height: 8px;
        transform: rotate(45deg);
        border-right: 2px solid white;
        border-bottom: 2px solid white;
        position: absolute;
        left: 4px;
        top: 2px;
    }

    .editFixed {
        z-index: 9;
    }

    .editFixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .editBox {
        height: 100%;
        width: 400px;
        background: #fff;
        box-shadow: -2px 1px 4px 0 #dbdbdb;
        position: absolute;
        top: 0;
        right: 0;
        animation: madalsBoxLeft 0.8s;
    }

    @keyframes madalsBoxLeft {
        from {
            right: -400px;
        }
        to {
            right: 0;
        }
    }

    .editTitle {
        width: 400px;
        height: 64px;
        line-height: 64px;
        font-size: 22px;
        padding-left: 25px;
        border-bottom: 1px solid #dbdbdb;
    }

    .editLi {
        margin: 24px 0 0 20px;
        display: flex;
    }

    .editInp>input {
        width: 280px;
        height: 24px;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 0 4px;
        line-height: 24px;
    }

    .editlastLi {
        width: 400px;
        height: 36px;
        position: absolute;
        bottom: 54px;
        display: flex;
        justify-content: center;
    }

    .editlastLi>button {
        margin: 0 16px;
    }

    .borBlue {
        border: 1px solid #38adff !important;
    }

    /*删除提示框*/

    .delBox {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.15);
        z-index: 1000000;
    }

    .delContent {
        width: 340px;
        height: 180px;
        background-color: #fff;
        border: solid 1px #fff;
        box-shadow: 0 2px 4px 0 #dbdbdb;
        border-radius: 4px;
        margin: calc((100vh - 280px) / 2) auto;
        z-index: 100000;
        animation: madalsBox 0.8s;
    }

    .required {
        color: #38adff;
    }

    @keyframes madalsBox {
        from {
            transform: translateY(-100px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .listZoor {
        width: 900px;
        height: 500px;
        line-height: 400px;
        text-align: center;
        font-size: 20px;
        letter-spacing: 5px;
        color: #929292;
    }
</style>